Question

我想替换表示div标签的字符串中的某些文本，该div标签可能包含样式和类属性，也可能不包括样式和类属性。例如，

var s = "<div style='xxx' class='xxx'>replaceThisText<div>

如果它只是标签，我相信我可以这样做：

str = str.replace(/<div>[\s\S]*?<\/div>/, '<div>' + newText+ '<\/div>');

但是如何考虑这些属性？

Answer 1

生成一个临时元素，将您的字符串作为HTML内容，然后在更新内容后获取其中的div以更新内容，获取临时元素的HTML。

＆＃13;

var s = "<div style='xxx' class='xxx'>replaceThisText<div>";

// create a temporary div element
var temp = document.createElement('div');

// set content as string
temp.innerHTML = s;

// get div within the temporary element
// and update the content within the div
temp.querySelector('div').innerHTML = 'newText';

// get back the current HTML content in the
// temporary div element
console.log(temp.innerHTML)

＆＃13;

为什么不使用正则表达式？

RegEx match open tags except XHTML self-contained tags

Using regular expressions to parse HTML: why not?

Answer 2

正则表达式永远不会是解析 html 内容的好决定使用DOMParser对象考虑以下简短解决方案（对于支持DOMParser实施的浏览器，请参阅compatibility table）：

＆＃13;

var s = "<div style='xxx' class='xxx'>replaceThisText<div>",
    tag = (new DOMParser()).parseFromString(s, 'text/html').querySelector('.xxx');

tag.textContent = 'newText';  // replacing with a new text
console.log(tag.outerHTML);   // outputs the initial tag representation with replaced content

＆＃13;

https://developer.mozilla.org/ru/docs/Web/API/DOMParser

如何使用正则表达式替换标记之间的文本

2 个答案: