如何更改window.getSelection()

时间:2019-06-17 01:16:25

标签: javascript html font-style

我想知道如何在单击按钮之后,使用window.getSelection() 更改所选文本的字体样式

例如,假设我们有以下短语:

  

世界你好!

如果我只是从中选择字符串ell,然后单击按钮,它将返回(在这种情况下,例如 bold 类型):

  

H 世界!

那么,我该怎么做? 我的主要问题是:我应该转换什么{strong>变量类型 window.getSelection()以更改字体样式 ,因为它返回一个对象,并且如果我执行了.toString(),它将不会有太大帮助。

3 个答案:

答案 0 :(得分:0)

使用window.getSelection()获取所选文本后,应使用以下命令更改其字体样式:

style.fontWeight = //font style

答案 1 :(得分:0)

您正在寻找将突出显示的文本包围到要添加新样式的新节点中。查看此答案How To Wrap / Surround Highlighted Text With An Element

答案 2 :(得分:-1)

function surroundSelection() {
        var span = document.createElement("span");
        span.style.fontWeight = "bold";
        span.style.color = "black";

        if (window.getSelection) {
            var sel = window.getSelection();
            if (sel.rangeCount) {
                var range = sel.getRangeAt(0).cloneRange();
                range.surroundContents(span);
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    }
<input type="button" onclick="surroundSelection()" value="Surround">
    <div contenteditable="true">Hello World</div>