Question

我有一些文本内容，我从第三方来源捕获，有时包含表情符号，表示为图像元素。我找到每个表情符号图像元素，并使用以下代码将它们转换为该表情符号的unicode字符：

$(this).find('img.emoji').each(function(i){
    emoji = decodeURIComponent($(this).data('textvalue'));
    $(this).replaceWith(emoji);
});

但是，紧接在表情符号之前的每个表情符号图像元素前面的文本都包含一个额外的空格字符。参见：

'[...] blah blah blah  <img class="emoji" data-textvalue="%F0%9F%98%92">'

但它应该是：

'[...] blah blah blah <img class="emoji" data-textvalue="%F0%9F%98%92">'

因为这来自第三方来源，所以我无法控制原始副本。但是，我想删除表情符号图像的每个实例中的额外空格字符（无论是在将其转换为unicode之前还是之后都不重要，但我怀疑它之前可能更容易）。我该如何做到这一点？

我的一个想法是使用javascript＆＃39; s str.indexOf获取图像元素开头的字符位置，然后删除比该值小1的字符。但是这需要将父元素转换为字符串，如果初始文本本身包含短语"<img"，则会导致问题，因为这不太可能。

有一种简单的方法可以解决这个问题吗？

Answer 1

我在这里打破了jQuery并使用了原生的Javascript - 对于那些有关于这类文本的标签的情况，它会更好。

考虑它的最佳方式（这是浏览器的内部表示）是未标记文本的位实际上有一个特殊的不可见标记，所以而不是

<div>I like ice-cream! <img src='ice-cream'></img> it's so yummy!</div>

你真的有

<div>
    <textnode>I like ice-cream! </textnode>
    <img src='ice-cream'></img>
    <textnode> it's so yummy!</textnode>
</div>

Javascript将让您遍历所有这些不同的元素，并修剪<img>标记之前的元素。这样的东西应该工作（get(0)只是将jQuery元素作为原生的javascript元素）：

var childNodes = $(this).get(0).childNodes;
//start at 1 instead of 0 - first node is irrelevant here
for (var i=1; i<childNodes.length; i++) {
    var node = childNode[i];
    if ( isNodeAnImg( node ) ) {
        var previousNode = childNodes[i-1];
        if ( isNodeATextNode() ) {
            stripTrailingSpaceFrom( previousNode );
        }
    }
}

function isNodeAnImg(node) {
    return (node.nodeType == Node.ELEMENT_NODE && node.nodeName == "img");
}

function isNodeATextNode(node) {
    previousNode.nodeType == Node.TEXT_NODE
}

function stripTrailingSpaceFrom( node ) {
    var text = node.textContent;
    var lastCharacter = text.charAt( text.length - 1 );
    if ( lastCharacter === ' ' ) {
        node.textContent = text.substring(0, text.length - 1);
    }
}

删除元素

1 个答案: