Div containing span does not properly wrap around it

I am attempting to highlight words in a textarea by placing a div behind the field and transferring the values over.

$("div").html($("textarea").text()
   .replace("bad-word", "<span style='background-color: red'>bad-word</span>"))

My test worked perfectly in Chrome, but I encountered an issue in IE where spans would not break to the next line within the div if the word was too long to fit on a single row. Instead, it caused a break-word effect which did not align properly with the text in the textarea. This problem occurred in both IE8 and IE9.

Screenshot of code result in IE 9

If you visit this fiddle link and add a letter at the start of the textarea, you will see the issue firsthand.

jqueryhtmlcss

Answer №1

CHECK IT OUT LIVE

$("#g1").val("I love talking about pizza, cheese, and all the delicious toppings! How are you today?");

$("#g1").keyup(function(e) {
    updateText(this);
})

function updateText( element ) {
    var textArea = $(element);
    var textValue = textArea.val();
    textValue = textValue.replace(/pizza/gi, "<span style='background:red'>pizza</span>");
    $("#g2").html(textValue );
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Handling a WCF POST request with JQuery resulting in a 400 Bad Request HTTP Response

I'm encountering an issue with my JQuery POST not being accepted by the WCF Service. Below is the JavaScript code for the POST: function jqueryPost() { var url = "/LoggingTest"; $.post(url, { message: "test message" }); } To handle the POST ...

c#jquerywcfposthttpwebrequest

Creating customized JQuery UI tabs to perfectly accommodate the available horizontal space

Can JQuery UI Tabs be modified to fill the horizontal space and stack to the left? In order to achieve this, could we consider using a markup like the one below: <table width="100%"> <tr> <td> ...content... </td> ...

cssjquery-ui

Tips on choosing additional (sibling) elements with CSS?

My navbar has the following structure: <ul class="nav navbar-nav"> <li class="nav-item"><a href="#services">Services</a></li> <li class="nav-item"><a href="#work">Work</a></li> <li class ...

css

Enhancing navigation functionality using CSS

I have two separate pages with navigation included in both. This way, it's easier to edit the navigation menu once instead of doing so on each page individually. However, I am now facing uncertainty on how to implement the 'active' class usi ...

htmlcsstwitter-bootstrap

Position floating divs at the bottom of the page

Check out this example on JSFiddle: I'm trying to make the left column align to the bottom, but I can't seem to figure it out. http://jsfiddle.net/magwalls/rdrznzhe/ <div width="100%" class="clear"> <div class="fl" width="50%">I ...

htmlcss

Retrieve information from the server (using asp.net) using Java Script and store it in the local storage of the client device

I am receiving a JSON object from the server-side, but I have been struggling to save it in LocalStorage. When I check FireBug, this is how it appears: If you are having trouble viewing the images clearly, try opening them in a separate page by right-click ...

javascriptjqueryhtmlajax

Insert an icon directly into a text input box

I'm attempting to insert an icon into a text input field. For example: One approach is to utilize background-image and then apply padding-left. However, I am interested in using CSS sprites. I have experimented with the following code: <!DOCTY ...

cssinputiconscss-sprites

Guide on making a color legend with JavaScript hover effects

On my website, there is a dynamic element that displays a table when values are present and hides it when there are no values. The values in the table are color-coded to represent different definitions. I wanted to add hover text with a color key for these ...

javascriptjqueryhtmlcsshover

Collaborative spreadsheet feature within a browser-based software platform

I am using an Angular-based SPA for my web application. My goal is to be able to open an Excel file within the application itself. Currently, I have a menu button or link that is linked to a specific path, for example //192.168.10.10/sharedExcels/myExcel. ...

javascripthtmlexcelangular

Efficiently submitting a directory with jQuery's AJAX capabilities

I am attempting to send an ajax request in the following manner: $.ajax({ url: 'directory/file.php', type: 'POST', data: 'param1=' + param1 + '&param2=' + param2, ...

jqueryajaxpost

Tips for utilizing an array within React and transforming it into a component

I've developed a website that pulls data from a SQL database I created, containing details such as name, address, and occupation of individuals. I successfully managed to showcase this information on the webpage by structuring an array and inserting t ...

javascriptcssreactjs

I am looking to adjust the height of my MUI Grid component

Recently exploring React, and I'm looking to set a height limit for MUI Grid. I've structured my project into 3 sections using MUI grid components. My goal is to restrict the page height in order to eliminate the browser scrollbar. If the conten ...

javascriptcssmaterial-uigrid

Creating a unique HTML contact form in Insightly with properly aligned and spaced fields

Greetings, I must admit that my coding skills are quite limited and I am currently trying to navigate the world of HTML... As I attempted to integrate a basic contact form code from Insightly (provided below/attached), I came across this discussion here ...

htmlcssinsightly

Dropdown does not populate with data

HTML content <select class="form-control" tabindex="-1" id="superId" name="superId[]" multiple="multiple" required="required" data-bind="options: SupArray, optionsText: ' ...

javascriptjqueryhtmlajaxknockout.js

Using flags to translate text on Google should not result in being redirected to another website

I have integrated Google's language picker with country flags into my WordPress template using the code below: <!-- Add English to Chinese (Simplified) BETA --> <a target="_blank" rel="nofollow" onclick="window.open('http://www.google. ...

javascriptjquerywordpressgoogle-translategoogle-translator-toolkit

The presence of "label.error" appears to persist across all bootstrap tabs

I am facing an issue where the $('label.error') element appears on every bootstrap tab, even though it should only display on one specific tab. The problem arises when a field fails validation on a bootstrap tab and as a result, a label with clas ...

javascriptjquerytwitter-bootstraptabs

Which tag should I use, <b> or <mark>, to emphasize important marketing terms within a paragraph?

Trying to emphasize specific keywords in a paragraph of text can be challenging. I'm currently puzzled about the distinction between the <b> and <mark> tags. These words are highlighted because they play a crucial role in marketing, prompt ...

html

When a radio button is chosen, multiple text fields must be completed in order to validate the form

I am working with a set of 3 radio buttons. If the last option, labeled "In Home," is chosen, then all 4 of the text fields must be filled in for the form to validate. While I have found information on how to achieve this with checkboxes or a single text f ...

javascripthtmlvalidationradio-grouprequired-field

How can I pass authentication details using jqGrid?

I am currently working with a service that has CORS support enabled. Typically, when making a server request, I create a request object using jQuery and include the withCredentials parameter set to true, which usually works well. However, I am facing an i ...

javascriptjqueryajaxcookiesjqgrid

Adjust the size of both the right and left price scales on TradingView Lightweight Charts

Is it possible to set a fixed width for both the right and left price scales on a chart? Let's say, 50 pixels for the right price scale and 70 pixels for the left price scale? For a working example, please visit https://jsfiddle.net/TradingView/cnbam ...

javascriptcssscaletradingview-apilightweight-charts