8

、、、などのいくつかのタイプの HTML 要素を含めることができ<div />ます。contenteditable<span /><a /><b /><u />

でテキストを選択するとcontenteditable、選択範囲内のすべてのスタイルを削除するボタンが必要になります。

例 1:

選択: 

Hello <b>there</b>. I am <u>a selection</u>

次のようになります。

Hello there. I am a selection

例 2:

選択: 

<a href="#">I am a link</a>

次のようになります。

I am a link

あなたはアイデアを得る...

現在の選択をカスタムテキストに置き換えるこの便利な機能https://stackoverflow.com/a/3997896/1503476を見つけました。しかし、最初に選択範囲のコンテンツを取得して、タグを削除してから置き換えることはできません。どうやってやるの？

4

4 に答える 4

4

私がこれを行う方法は、選択範囲内のノードを反復処理し、インライン ノードを削除することです (おそらく<br>要素をそのままにしておきます)。便宜上、 Rangyライブラリを使用した例を次に示します。すべての主要なブラウザー (IE 6 を含む) で動作しますが、完全ではありません。たとえば、部分的に選択された書式要素は分割されません。つまり、部分的に選択された書式要素は、選択された部分だけではなく完全に削除されます。これを修正するのはもっと難しいでしょう。

デモ: http://jsfiddle.net/fQCZT/4/

コード：

var getComputedDisplay = (typeof window.getComputedStyle != "undefined") ?
    function(el) {
        return window.getComputedStyle(el, null).display;
    } :
    function(el) {
        return el.currentStyle.display;
    };

function replaceWithOwnChildren(el) {
    var parent = el.parentNode;
    while (el.hasChildNodes()) {
        parent.insertBefore(el.firstChild, el);
    }
    parent.removeChild(el);
}


function removeSelectionFormatting() {
    var sel = rangy.getSelection();

    if (!sel.isCollapsed) {
        for (var i = 0, range; i < sel.rangeCount; ++i) {
            range = sel.getRangeAt(i);

            // Split partially selected nodes 
            range.splitBoundaries();

            // Get formatting elements. For this example, we'll count any
            // element with display: inline, except <br>s.
            var formattingEls = range.getNodes([1], function(el) {
                return el.tagName != "BR" && getComputedDisplay(el) == "inline";
            });

            // Remove the formatting elements
            for (var i = 0, el; el = formattingEls[i++]; ) {
                replaceWithOwnChildren(el);
            }
        }
    }
}
​
于 2012-12-14T15:07:04.323 に答える
0

提案された関数に基づいて、コンソールで少し実験した後、このすてきな小さなスクリプトを思いつきました。ただし、ブラウザ間の互換性についてはテストしていません。

var selection = window.getSelection().getRangeAt(0);
var selectedText = selection.cloneContents().childNodes[0]; // This is your selected text.

これで、選択したテキストからHTMLタグを削除し、質問で既に提供した関数を使用して置き換えることができます。

たとえば、php.jsプロジェクトstrip_tags()から使用できます

これがあなたの質問に答えることを願っています。

于 2012-12-14T14:02:33.827 に答える
0

http://jsfiddle.net/tnyWD/

HTML：

<div class="test">
    Hello <b>there </b><a href="#">I am a link</a>
</div>
<button class="remove">Remove HTML</button>​

JS：

$(document).ready(function(){
    jQuery.fn.stripTags = function() { return this.replaceWith(this.html().replace(/<\/?[^>]+>/gi, '') ); };
$('.remove').click(function(){
    $('.test').stripTags();
});
});​

それはあなたが探しているものですか？

于 2012-12-14T14:03:43.557 に答える
0

http://jsfiddle.net/fQCZT/2/

<div contenteditable="true">
    <p>
        Here is some <b>formatted text</b>. Please select some and watch the formatting
        <i>magically disappear</i>.
        <br>
        Look, some more <u>formatted</u> content.
    </p>
    <p>And <i>another</i> paragraph of it</p>
</div>
<button onmousedown="removeSelectionFormatting()">Change</button>​

上記の回答の1つと重複していますが、テキストを変更するボタンがあります!

于 2012-12-14T13:52:09.397 に答える