JavaScript正则表达式：为每个字符插入span标签

Question

我手头有一个正则表达式任务，确实需要一些帮助。

假设我有如下文本：

To Sherlock Holmes she is always <i>THE</i> woman.

我需要将每个字符括在 span 标记中，HTML 标记除外。例如，上面的文本将是：

<span>T</span><span>o</span><span> </span><span>S</span><span>h</span>
<span>e</span><span>r</span><span>l</span><span>o</span><span>c</span>
<span>k</span><span> </span><span>H</span><span>o</span><span>l</span>
<span>m</span><span>e</span><span>s</span><span> </span><span>s</span>
<span>h</span><span>e</span><span> </span><span>i</span><span>s</span>
<span> </span><span>a</span><span>l</span><span>w</span><span>a</span>
<span>y</span><span>s</span><span> </span><i><span>T</span><span>H</span>
<span>E</span></i><span> </span><span>w</span><span>o</span><span>m</span>
<span>a</span><span>n</span><span>.</span>

注意：

• 每个字符都包含在 span 标记中，甚至是空格
• HTML 标签，<i></i>不是

欢迎任何建议。

谢谢！

Answer 1

这项工作可以通过 DOM 交互更好地处理。以下两个实用函数将帮助使用 span 标签包装给定文本中的每个字符。

/**
 * recursively get all text nodes as an array for a given element
 */
function getTextNodes(node) {
    var childTextNodes = [];

    if (!node.hasChildNodes()) {
        return;
    }

    var childNodes = node.childNodes;
    for (var i = 0; i < childNodes.length; i++) {
        if (childNodes[i].nodeType == Node.TEXT_NODE) {
            childTextNodes.push(childNodes[i]);
        }
        else if (childNodes[i].nodeType == Node.ELEMENT_NODE) {
            Array.prototype.push.apply(childTextNodes, getTextNodes(childNodes[i]));
        }
    }

    return childTextNodes;
}

/**
 * given a text node, wrap each character in the
 * given tag.
 */
function wrapEachCharacter(textNode, tag) {
    var text = textNode.nodeValue;
    var parent = textNode.parentNode;

    var characters = text.split('');
    characters.forEach(function(character) {
        var element = document.createElement(tag);
        var characterNode = document.createTextNode(character);
        element.appendChild(characterNode);

        parent.insertBefore(element, textNode);
    });

    parent.removeChild(textNode);
}

现在给定一些 HTML 片段，我们将创建它的 DOM 表示，然后使用第一个函数 - 从中​​检索所有文本节点getTextNodes。一旦我们拥有了所有文本节点，我们就可以将它们中的每一个传递给第二个函数 - wrapEachCharacter。

// create a wrapper element that will hold our HTML.
var container = document.createElement('div');
container.innerHTML = "To Sherlock Holmes she is always <i>THE</i> woman.";

// get all text nodes recursively.
var allTextNodes = getTextNodes(container);

// wrap each character in each text node thus gathered.
allTextNodes.forEach(function(textNode) {
    wrapEachCharacter(textNode, 'span');
});

此处发布了一个示例。