jquery - 合并堆叠的 DOM 元素

发布于 2025-01-05 05:39:09 字数 639 浏览 1 评论 0原文

我有通过 contenteditable div 格式化的 HTML。我想让它更简洁、更现代的 HTML。我可以轻松替换任何 b、strong、em、font 等标签，并将它们替换为 span，但结果会产生“堆叠”元素。

例如，我可能有：

<span style="font-weight:bold">
    <span style="text-decoration:underline">some text</span>
</span>

我想看到：

<span style="font-weight:bold; text-decoration:underline">some text</span>

困难的部分是它需要处理：

<span style="font-weight:bold">
    <span style="text-decoration:underline">some text</span> not underlined
</span>

我已经做了很多搜索和思考这个问题，但还没有找到任何合理的东西。

原文

I have HTML that was formatted via a contenteditable div. I am wanting to make it more concise, modern HTML. I can easily replace any b, strong, em, font, etc tags and replace them with spans, but the result produced "stacked" elements.

For instance, I might have:

<span style="font-weight:bold">
    <span style="text-decoration:underline">some text</span>
</span>

And I want to see:

<span style="font-weight:bold; text-decoration:underline">some text</span>

The hard part is it would need to handle:

<span style="font-weight:bold">
    <span style="text-decoration:underline">some text</span> not underlined
</span>

I've done quite a bit of searching and thinking about this, but haven't found anything reasonable.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

但可醉心 2025-01-12 05:39:09

好吧，这是一个开始。显然，您的选择器将比 span 更具体。

$("span").each(function(){
    var $this = $(this);
    var $contents = $(this).contents();

    if($contents.length === 1 && $contents.is("span")){
        // only one child (including text nodes) and it is a span, combine
        copyStylesFromParentToChild();  // need to implement this

        $this.replaceWith($this.children());  // replace the parent with the child
    }
});

这里唯一棘手的部分是copyStylesFromParentToChild。我不知道有什么简单直接的方法可以将所有样式从一个元素复制到另一个元素。您可以尝试 JavaScript 和 JavaScript复制样式

Well, here's a start. Obviously your selector would be more specific than just span.

$("span").each(function(){
    var $this = $(this);
    var $contents = $(this).contents();

    if($contents.length === 1 && $contents.is("span")){
        // only one child (including text nodes) and it is a span, combine
        copyStylesFromParentToChild();  // need to implement this

        $this.replaceWith($this.children());  // replace the parent with the child
    }
});

The only tricky part here is copyStylesFromParentToChild. I don't know any easy straightforward way to copy all styles from one element to another. You can try JavaScript & copy style

回复收藏 0 原文

~没有更多了~