javascript - 替换 HTML 中的标签

Question

我在 HTML 文档中有一些文本，就像这样......

<p> MY TEXT </p>

我想当某个 JS 函数被触发来替换......

<p>

和

<p><span class="auto-style1">

和...

</p>

和

</p></span>

所以......我该怎么做？

（更先进...）

然后我希望能够重复这个 JS 代码来替换所有<p>'s & </p>'s ......那么我该怎么做呢？

Answer 1

由于问题被标记为 jQuery ...

$('p').wrapInner('<span class="auto-style1"></span>');

演示：http: //jsfiddle.net/BRyFH/

Answer 2

像这样：

$('p').html(function () {
    return $( '<span/>' ).addClass( 'auto-style1' ).html( $( this ).html() )
});

Answer 3

你可以像这样使用 POJS 来做到这一点。

CSS

.auto-style1 {
    border-style: solid;
    border-width: 2px;
}

HTML

<p>text1</p>
<div>
    <p>text2</p>
    <div>
        <p>text3</p>
    </div>
</div>
<p>text4</p>
<p>text5</p>

Javascript

function wrapContent(element, tagName, wrapperTagName, wrapperProperties) {
    wrapperProperties = wrapperProperties || {};
    var tags = element.getElementsByTagName(tagName),
        tagsLength = tags.length,
        tagsIndex,
        tag,
        child,
        wrappedContent,
        prop;

    for (tagsIndex = tagsLength - 1; tagsIndex >= 0; tagsIndex -= 1) {
        tag = tags[tagsIndex];
        child = tag.firstChild;
        wrappedContent = document.createElement(wrapperTagName);
        for (prop in wrapperProperties) {
            if (wrapperProperties.hasOwnProperty(prop)) {
                wrappedContent[prop] = wrapperProperties[prop];
            }
        }

        while (child) {
            wrappedContent.appendChild(child);
            child = child.nextSibling;
        }

        tag.appendChild(wrappedContent);
    }
}

wrapContent(document.body, "p", "span", {
    "className": "auto-style1"
});

在jsfiddle