Question

我有一个字符串。说它看起来像这样：

&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Web Page&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;p&gt;Content.&lt;/p&gt;
    &lt;/body&gt;
&lt;/html&gt;

如何使输出看起来像这样？

&lt;!DOCTYPE html&gt;
&lt;<span class="tag>html</span>&gt;
    &lt;<span class="tag>head</span>&gt;
        &lt;<span class="tag>title</span>&gt;Web Page&lt;<span class="tag>/title</span>&gt;
    &lt;<span class="tag>/head</span>&gt;
    &lt;<span class="tag>body</span>&gt;
        &lt;<span class="tag>p</span>&gt;Content.&lt;<span class="tag>/p</span>&gt;
    &lt;<span class="tag>/body</span>&gt;
&lt;<span class="tag>/html</span>&gt;

Answer 1

使用String#replace方法替换包裹范围内的所有标记。

str.replace(/&lt;(\/?\w+)&gt;/g, '&lt;<span class="tag">$1</span>&gt;');
// or .replace(/(&lt;)(\/?\w+)(&gt;)/g, '$1<span class="tag">$2</span>$3')

＆＃13;

var str = `&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Web Page&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;p&gt;Content.&lt;/p&gt;
    &lt;/body&gt;
&lt;/html&gt;`

document.body.innerHTML = str.replace(/&lt;(\/?\w+)&gt;/g, '&lt;<span class="tag">$1</span>&gt;');

＆＃13;

.tag {
  color: red;
}

＆＃13;

Regex explanation here.

Answer 2

我会使用String.replace ...

分两步完成此操作

str.replace(/&lt;/g,'&lt;<span class="tag">').replace(/&gt;/g,'</span>&gt;');

如何在字符串中的标记周围包装标记 - Javascript

2 个答案: