Replacing part of string with a HTML Element

Question

I'm using plain Javascript to replace part of a string with an HTML Element.

I'm using the following script to do what I need, consider var data to be an array of objects where data[objectAtIndex].text has the following example string {0} is the right answer, but it can also contain Something {0} fishy. The {0} part of the string can change place at any time.

var select = document.createElement("select"),
    textDiv = document.createElement("div");
textDiv.innerHTML = data[i].text.replace(pattern, select);

The regular expression I use looks like var pattern = /\{0\}/i;

Now, this halfway works, only it converts the select element to string, which yields [object HTMLSelectElement] instead of the actual element itself.

I want the actual element, and not the string representation of this, and I can't really find any answers which doesn't utilize jQuery.

Your wording is confusing. You say, "I want the actual element, and not the string representation of this", but you must set innerHtml to a string. — cdosborn
– cdosborn, Commented Mar 25, 2015 at 17:14

cdosborn · Accepted Answer · 2015-03-26 14:51:29Z

2

Here's the simplest solution. Use select.outerHTML

var select = document.createElement("select"),
    textDiv = document.createElement("div");
textDiv.innerHTML = data[i].text.replace(pattern, select.outerHTML);

and widely supported.

Live example:

var text = "This is a <strong>test</strong> {0} Testing <em>1 2 3</em>"

var pattern = /\{0\}/i;

var select = document.createElement("select"),
    textDiv = document.createElement("div");

textDiv.innerHTML = text
document.body.appendChild(textDiv);

setTimeout(function(){
    textDiv.innerHTML = text.replace(pattern, select.outerHTML);
}, 1000)

edited Mar 26, 2015 at 14:51

answered Mar 25, 2015 at 17:11

cdosborn

3,50934 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

T.J. Crowder Over a year ago

Seems really roundabout to create an element just to get the markup for it.

cdosborn Over a year ago

You make the assumption that all the OP wants is the element tag name. Maybe they will want more. This method allows them to use DOM methods on the select node before converting it to text.

T.J. Crowder Over a year ago

No, I make the assumption that writing the markup for the element is entirely feasible. Or if not, then one should append the element created rather than make a trip through markup and parsing.

gen_Eric · Accepted Answer · 2015-03-25 17:05:47Z

2

Wrap your element(s) in a temp <div> and then get its .innerHTML.

var select = document.createElement("select"),
    textDiv = document.createElement("div"),
    tempDiv = document.createElement("div");

tempDiv.appendChild(select);
textDiv.innerHTML = data[i].text.replace(pattern, tempDiv.innerHTML);

answered Mar 25, 2015 at 17:05

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

10 Comments

T.J. Crowder Over a year ago

Seems really roundabout to create an element just to get the markup for it.

gen_Eric Over a year ago

@T.J.Crowder: I guess you could use .outerHTML, but I thought that wasn't supported in all browsers.

T.J. Crowder Over a year ago

That would still be creating an element just to get markup for it.

cdosborn Over a year ago

@NichlasTorgersen, this is why my answer is relevant. Do whatever you want to the element, and just call element.outerHtml

T.J. Crowder Over a year ago

@NichlasTorgersen: You can do that directly with markup, too. But in any case, you have several options in the various answers here, including directly using that element you've built up with your loop (without converting it back to markup).

|

T.J. Crowder · Accepted Answer · 2015-03-25 17:23:36Z

By using innerHTML, you're using markup. So one option is, just use markup (but more options follow):

var textDiv = document.createElement("div");
textDiv.innerHTML = data[i].text.replace(pattern, "<select></select>");

Live example:

var data = {
  0: {
    text: "This is a <strong>test</strong> {0} Testing <em>1 2 3</em>"
  }
};
var i = 0;
var pattern = /\{0\}/i;
var textDiv = document.createElement("div");
textDiv.innerHTML = data[i].text.replace(pattern, "<select></select>");
document.body.appendChild(textDiv);

If you don't want to use markup, you can append the part of the string before the {0}, then the element, then the part of the string after the {0}:

var select = document.createElement("select"),
    textDiv = document.createElement("div"),
    text = data[i].text,
    index = text.indexOf("{0}"); // No need for case-insensitivity
if (index === -1) {
    index = text.length;
}
textDiv.innerHTML = text.substring(0, index);
textDiv.appendChild(select);
if (index < text.length) {
    textDiv.insertAdjacentHTML("beforeend", text.substring(index + 3));
}

var data = {
  0: {
    text: "This is a <strong>test</strong> {0} Testing <em>1 2 3</em>"
  }
};
var i = 0;
var select = document.createElement("select"),
    textDiv = document.createElement("div"),
    text = data[i].text,
    index = text.indexOf("{0}"); // No need for case-insensitivity
if (index === -1) {
    index = text.length;
}
textDiv.innerHTML = text.substring(0, index);
textDiv.appendChild(select);
if (index < text.length) {
    textDiv.insertAdjacentHTML("beforeend", text.substring(index + 3));
}
document.body.appendChild(textDiv);

Or if the pattern has to be a regex:

var select = document.createElement("select"),
    textDiv = document.createElement("div"),
    text = data[i].text,
    match = pattern.exec(text),
    index = match ? match.index : text.length;
textDiv.innerHTML = text.substring(0, index);
textDiv.appendChild(select);
if (match) {
    textDiv.insertAdjacentHTML("beforeend", text.substring(index + match[0].length));
}

var data = {
  0: {
    text: "This is a <strong>test</strong> {0} Testing <em>1 2 3</em>"
  }
};
var i = 0;
var pattern = /\{0\}/i;
var select = document.createElement("select"),
    textDiv = document.createElement("div"),
    text = data[i].text,
    match = pattern.exec(text),
    index = match ? match.index : text.length;
textDiv.innerHTML = text.substring(0, index);
textDiv.appendChild(select);
if (match) {
    textDiv.insertAdjacentHTML("beforeend", text.substring(index + match[0].length));
}
document.body.appendChild(textDiv);

Collectives™ on Stack Overflow

Replacing part of string with a HTML Element

3 Answers 3

3 Comments

10 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related