Replacing a substring of a TextNode with an HTML node (element)

Question

I'm trying to iterate a set of textNodes and replacing some occurrences with an HTML element.

For example:

<span>some text<br>without html nodes</span>

Translates to

Node1: Type Text "some text"
Node2: Type Element: <br>
Node3: Type Text: "without html nodes"

How do I modify for example node 3 into:

Node3: Type Text "without"
Node4: Type Element <span>html</html>
Node5: Type Text "nodes"

So, basically I want to replace a substring of a textnode and convert it into an html node. Any ideas?

span.innerHTML = span.innerHTML.replace('html','<span>html</span>') — adeneo
– adeneo, Commented Oct 5, 2016 at 14:02
are the values of Node 1, 2, 3, 4, 5 a constant string or its a variable ? — Nikhil Nanjappa
– Nikhil Nanjappa, Commented Oct 5, 2016 at 14:03
@adeneo With your suggestion, If there are two or more instances of "html" in the text, they will also be replaced. I'm relying on the index positions and lengths. — pelican_george
– pelican_george, Commented Oct 5, 2016 at 14:41

the8472 · Accepted Answer · 2022-10-20 22:16:51Z

4

The Range interface provides a lot of convenient node slicing and splicing operations

let span = document.createElement("span")
span.insertAdjacentHTML("afterbegin", "some text<br>without html nodes") 
let text = span.childNodes[2]
let range = new Range()
range.setStart(text, 8)
range.setEnd(text, 12)
range.surroundContents(document.createElement("span"))
console.log(span.outerHTML) // prints <span>some text<br>without <span>html</span> nodes</span>

To compute the particular offsets in the text node you can use various string or regexp methods.

edited Oct 20, 2022 at 22:16

answered Oct 5, 2016 at 15:19

the8472

43.5k6 gold badges79 silver badges139 bronze badges

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

Collectives™ on Stack Overflow

Replacing a substring of a TextNode with an HTML node (element)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related