Question

我知道如何删除或操作HTML元素中的字符串，但如果它在HTML元素之外，我该怎么做呢？我试图删除（|）字符，但不确定如何使用javascript。

<html>

<body>
    <p>Hello</p>
    |
    <p>World</p>
    |
    <p>!</p>
</body>

Answer 1

您可以将Node.nodeType与$.fn.contents()和$.fn.filter()

结合使用

只读Node.nodeType属性返回表示节点类型的无符号短整数。

$(document).ready(function() {
     $('div').contents().filter(function(){
       return this.nodeType == Node.TEXT_NODE && this.textContent.trim()=='|';
     }).remove();
   });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p>Hello</p>
  |
  <p>World</p>
  |
  <p>!</p>
</div>

Answer 2

使用innerHTML进行文字替换可能是最容易理解的问题，但这种做法确实非常慢且非常糟糕。
有一些肯定的图书馆可以做你想要的，但我不想要这么简单的任务需要庞大的图书馆所以这是一种纯粹的JavaScript方式：

在添加，删除和更改包含的文本方面，文本节点就像元素节点一样你可以抓住第一个＆＃34; |＆＃34;通过document.body.firstElementChild.nextSibling，然后您可以将其从父项中删除或编辑其内容，如正常：

var textNode1 = document.body.firstElementChild.nextSibling;
var textNode2 = textNode1.nextSibling.nextSibling;
// Remove the first text node
textNode1.parentNode.removeChild(textNode1);
// Replace the second by something else
textNode2.textContent = 'Derp';

[Fiddle]

如果需要，您还可以通过选中.nodeType来检查节点是文本节点还是其他节点：

for(var i = 0; i < document.body.childNodes.length; i++)
{
    if(document.body.childNodes[i].nodeType == 3) // "3" means text node
    {
        document.body.removeChild(document.body.childNodes[i]);
    }
}

.nodeType的可能值及其含义列于MDN，W3Schools或the DOM Level 1 Specification (pages 25-28)。

Answer 3

这是一个vanilla-JavaScript，递归解决方案，删除不在“普通”节点内的所有文本。我的意思是指不在以下标签内的文字：

[ "a", "p", "script", "span", "b", "em", "strong", "i" ]

通常是只有文本节点作为子节点的那个。

// these elements can have text-only nodes
var okayTypes = [ "a", "p", "script", "span", "b", "em", "strong", "i" ]
var removeAllText = function (node) {
    // if the nodeType is 3 (text node) and the nodeName is "#text"
    if (node.nodeName == "#text") {
        node.parentNode.removeChild(node);
    } else if (node.childNodes) {
        for (var i = node.childNodes.length; i--;) {
            // if the child element does not allow text-only nodes, recurse on it
            if (okayTypes.indexOf(String(node.childNodes[i].tagName).toLowerCase()) == -1)
                removeAllText(node.childNodes[i]);
        }
    }
}
removeAllText(document.body);

<body>
<p>do not remove 1</p>
remove1
<p>do not remove 2</p>
remove2
<p>do not remove 3</p>
</body>

Answer 4

在这种情况下，只需迭代正在检查的节点direct descendants，<body>，然后删除遇到的每个文本节点。

var root = document.body;
[].forEach.call(root.childNodes, function(node) {
  if (node.nodeType == 3) {
    root.removeChild(node);
  }
});

<html>

<body>
    <p>Hello</p>
    |
    <p>World</p>
    |
    <p>!</p>
</body>

如何删除不在HTML元素中的字符？

4 个答案: