jQuery:如何换行所选文本

jQuery: how to wrap selected text

本文关键字：文本 换行 何换行 jQuery      更新时间：2023-09-26

我想使用以下函数来获取当前选定的文本（来源：javascript替换所有浏览器的选择）。

就我而言，我不想替换所选文本，而是想在它之前和之后添加一些东西，主要是 HTML 标签（通过单击按钮）。

例：所选文本 = 您好新文本 （html） = <u>Hello</u>

获取所选文本的代码： 

  function replaceSelection(html) {
        var sel, range, node;
        if (typeof window.getSelection != "undefined") {
            // IE 9 and other non-IE browsers
            sel = window.getSelection();
            // Test that the Selection object contains at least one Range
            if (sel.getRangeAt && sel.rangeCount) {
                // Get the first Range (only Firefox supports more than one)
                range = window.getSelection().getRangeAt(0);
                range.deleteContents();
                // Create a DocumentFragment to insert and populate it with HTML
                // Need to test for the existence of range.createContextualFragment
                // because it's non-standard and IE 9 does not support it
                if (range.createContextualFragment) {
                    node = range.createContextualFragment(html);
                } else {
                    // In IE 9 we need to use innerHTML of a temporary element
                    var div = document.createElement("div"), child;
                    div.innerHTML = html;
                    node = document.createDocumentFragment();
                    while ( (child = div.firstChild) ) {
                        node.appendChild(child);
                    }
                }
                range.insertNode(node);
            }
        } else if (document.selection && document.selection.type != "Control") {
            // IE 8 and below
            range = document.selection.createRange();
            range.pasteHTML(html);
        }
    }

调用函数的代码：

replaceSelection('<span><font color="red">hoho</font></span>');

有人可以告诉我如何通过修改上述内容来实现这一点吗？

非常感谢对此的任何帮助，蒂姆。

jQuery的append（）和prepend（）应该可以解决问题。

$(".my-span").prepend("<u>").append("</u>");

.HTML：

<div>
  <span class="my-span">Hello</span>
</div>

我认为这可能会对您有所帮助

.HTML

<div id="abc">I am a div.</div>
<br />
<input value="Add Before" id="before" type="submit">
<input value="Add After" id="after" type="submit">
<input value="InSide Before" id="inSideB" type="submit">
<input value="To Replace With Html" id="inSideRpHtml" type="submit">
<input value="To Replace With Text" id="inSideRpText" type="submit">

JQ

$（document）.ready（function（）{

   //for adding Before
   $("#before").click(function () {
$("#abc").before("Before<br />");
});
   //for adding After
   $("#after").click(function () {
$("#abc").after("After<br />");
});
    //for adding Inside before
    $("#inSideB").click(function () {
$("#abc").prepend("New Content!");
});
     //for adding Inside after 
    $("#inSideA").click(function () {
$("#abc").append("New Content!");
});
    // for Replacing with Html content
    $("#inSideRpHtml").click(function () {
$("#abc").html("<span><font color=red>hoho</font></span>");
});
   // for Replacing with Text content
    $("#inSideRpText").click(function () {
$("#abc").text("<span><font color=red>this is text");
});
});

检查此链接这是现场演示

如果这是您需要的，请回复。

相关文章：