当前位置: 首页 > 面试题库 >

Javascript:如何让文本节点在Break标签之后/之前,并用ddb标签包装它们?

权承
2023-03-14
问题内容

我已经在Jquery中完成了此操作,但希望在Javascript中实现而不依赖任何库。

$("br",document).parent().contents().each(function() {
    var text = this.textContent ? this.textContent : this.innerText;
    text = this.textContent.replace(/\s+/g, '')
    if ( this.nodeType == 3 && text.length != 0) {
        $(this).wrap('<ddb></ddb>')
    }
});

问题答案:

以下代码应该执行与您的函数完全相同的操作。

<html>

<body>
Hello
<p>
Hello
<br/>
Hello 2
<br/>

     <br/>      
<br/>
</p>

<button onclick="wrapText()">Wrap</button>

<script type="text/javascript">
    function wrapText() {
        var nodeList = document.getElementsByTagName('br');
        for (var i=0; i < nodeList.length; i++) {
            var node = nodeList[i];
            var parentNode = node.parentNode;
            if (!parentNode) continue;
            for (var c=0; c < parentNode.childNodes.length; c++) {
                var child = parentNode.childNodes[c];
                if (child.nodeType != 3) continue;

                if (child.nodeValue.match(/[^\s]/) != null) {
                    var newElement = document.createElement("b");
                    newElement.innerHTML = child.nodeValue;
                    parentNode.insertBefore(newElement, child);
                    parentNode.removeChild(child);
                }
            }
        }
    }
</script>

</body>
</html>

不过,我要指出的是,如果<br/>是包裹在任何元素,你只得到的的childNodes该元素,因此,如果它是一个简单的标签,你会只换行文本节点内<b><ddb></ddb>(那是什么,顺便说一下? )。

你也有一个bug,你是分配text到node.textContent ? node.textContent : node.innerText后来干脆用下一行node.textContent,所以我固定的。我还更改了正则表达式以仅匹配第一个非空白字符,如果确实找到了该字符,则将其包装。



 类似资料:
  • 问题内容: 我想从放置在和标记中的HTML页面提取文本,因此我可以开始对该页面进行标记化,以便为每个页面构造倒排索引,以便回答搜索查询。 我如何使用jsoup 获取标签 要在该参数中写入的字符串是什么? 问题答案: 这可以做的工作 这是您可以使用的所有选择器的列表。 假设您有这个html: 要获得结果,您应该使用: 要么 假设现在您具有以下复杂的html 要从两个标签中获取值,您必须执行以下操作

  • 问题内容: 标记对于HTML中的代码块以及编写脚本时调试输出非常有用,但是如何使文本自动换行而不是打印长行呢? 问题答案: 答案,来自此页面的CSS:

  • 问题内容: 我一直在使用此d3项目中的示例代码来学习如何显示d3图形,但似乎无法使文本显示在圆圈的中间)。我看过其他示例并尝试添加 和 在定义了节点之后,但是当我将鼠标悬停在每个节点上时,我看到的唯一结果是显示“要显示的节点名称”。它没有显示为圆圈内的文本。我是否需要编写自己的svg文本对象,并根据圆的半径确定需要放置的svg文本对象的坐标?从其他两个示例来看,似乎d3已经以某种方式进行了处理。我

  • 我有以下html: 我尝试获取div元素的子元素,然后迭代子元素并将其转换为html,但这只返回标记元素,而忽略元素之间的文本。在理想情况下,文本将被p标记包围,但情况并非如此:S 如果我在div元素上使用element.ownText函数,那么我会得到没有标记的文本,我需要这两样东西,并且顺序正确:/ 谢谢

  • 问题内容: 相对的Python新手在这里。我有一个无法修改的程序输出的文本字符串。对于讨论,可以说: 我想删除标点符号前的空格,但不删除第二个空格。我一直在尝试使用正则表达式,并且我知道可以使用match =’\ s [\?。!\“] \ s’作为搜索词来匹配想要的实例。 re.sub是否可以用删除的前导空格替换搜索词?关于如何进行的任何想法? 问题答案: 在要 保留 的文本周围放置一个组,并在替

  • 4.2.8 launch文件标签之arg <arg>标签是用于动态传参,类似于函数的参数,可以增强launch文件的灵活性 1.属性 name="参数名称" default="默认值" (可选) value="数值" (可选) 不可以与 default 并存 doc="描述" 参数说明 2.子级标签 无 3.示例 launch文件传参语法实现,hello.lcaunch <launch>