`

innserHTML 和 pasteHTML的区别

阅读更多
innerHTML 是一个属性,可以取得或者设定该元素内的 HTML 内容,可以是任意能包含 HTML 子节点的元素都使用它

pasteHTML()是一个方法,在指定的文字区域内替换该区域内的文本或者HTML,该方法必须应用于一个 createTextRange() 或者 document.selection.createRange() 创建的区域上
 
例:
<Script Language="JavaScript">
       function addLink(){
          var oRange = document.selection.createRange();
          if(oRange.text!=''){
             var oUrl = window.prompt('链接网址...','http://www.163.com/');
             var oHtml = '<a href='+oUrl+' target=_blank>'+oRange.text+'</a>';
             oRange.pasteHTML(oHtml);
          }else{
             window.alert('您没有选择加链接的文字!');
          }
       }
</Script>
网易   新浪   搜狐<br><br>
<input type="button" value="添加链接" onclick="addLink();">
分享到:
评论

相关推荐

    JS中innerHTML和pasteHTML的区别实例分析

    在JavaScript中,innerHTML和pasteHTML都是用于操作HTML文档对象模型(DOM)的两个关键特性,但它们在使用和功能上存在显著的区别。 innerHTML属性是一个非常常用的方法,它允许我们获取或设置HTML元素内部的全部...

    JS实现pasteHTML兼容ie,firefox,chrome的方法

    上述代码中,首先判断浏览器是否支持document.selection属性,如果支持,则使用IE特有的document.selection.createRange()和range.pasteHTML()方法。如果不支持document.selection,那么就使用W3C标准的window....

    ckeditor_notion_pastehtml

    总的来说,"ckeditor_notion_pastehtml"项目展示了如何利用JavaScript和CKEditor的API来改进用户体验,特别是在处理复杂HTML粘贴场景时。它提醒我们,尽管富文本编辑器提供了很多便利,但定制化的需求总是存在的,而...

    JavaScript中在光标处插入添加文本标签节点的详细方法

    此外,文章中还提到了innerHTML和pasteHTML()方法的区别。innerHTML是HTML元素的一个属性,它用于获取或者设置元素内的HTML内容。而pasteHTML()是DocumentSelection对象的一个方法,用于在指定的文字区域内替换该...

    用JS将搜索的关键字高亮显示实现代码

    在网页开发中,有时我们需要对文章中的特定关键字进行高亮显示,以便用户更容易发现和理解。这在搜索结果展示、文章阅读或者数据分析等场景中非常常见。本文将介绍如何使用JavaScript来实现这样的功能,主要围绕提供...

    quill.js-心目中的最佳富文本编辑器-html引入、改后可用于Vue-quill-editor

    quill.js-心目中的最佳... ... 可以将文本框内图片优先上传后服务器 因为编辑器默认是将图片转成base64存储的,而我们实际开发需要将图片存在自己的服务器中。 重构组件,实现及时上传 ...汉化后的工具组栏,更符合用户需求

    光标处插入,兼容IE6,IE7,FF等,适用于编辑器,浏览插入表情

    例如,IE不支持`getSelection().insertNode()`,而是使用`document.selection.createRange().pasteHTML()`。因此,我们需要针对每种浏览器实现不同的插入逻辑,以确保在所有浏览器中都能正常工作。 为了在编辑器中...

    vb6_Webbrowser控件使用技巧

    - 通过`GoBack`和`GoForward`方法控制页面的前进和后退。 - 使用`WebBrowser1_CommandStateChange`事件监听命令状态的变化,并根据当前状态更新相应的按钮状态。 #### 五、控制网页滚动条 为了使网页不显示滚动...

    kindeditor使用手册

    此外,KindEditor 还提供了丰富的 API 和事件,如 `editordata()` 获取编辑器内容,`pasteHTML()` 插入 HTML,`selectText()` 选择文本等,以便进行更复杂的交互操作。 总的来说,KindEditor 是一个强大且灵活的富...

    wangEditor V4

    5. **获取和设置内容**:编辑器提供了`txt.html()`和`txt.text()`方法来获取HTML格式和纯文本格式的内容,以及`txt.append()`、`txt.pasteHTML()`等方法来插入或粘贴内容。 6. **插件扩展**:wangEditor允许开发者...

    JavaScript 点击插入文字

    JavaScript 点击插入文字功能的实现依赖于JavaScript语言本身提供的事件处理和...通过深入理解这些知识点,开发者不仅能够实现上述功能,还可以在此基础上进行改进和创新,为用户提供更加丰富和个性化的网页交互体验。

    javascript关键字实时自动高亮

    `findText`方法用于在文档的文本中查找关键词,如果找到,就用`pasteHTML`方法替换找到的文本,将其包装在一个具有红色边框的`div`元素中,并添加一个链接,链接标题为找到的文本,链接地址指向`...

    类似qq空间中的留言编辑器

    =null) R.pasteHTML("&lt;span class='ShowText'&gt;"+_Text+"&lt;/span&gt;"); break; case 7: E.document.execCommand('CreateLink',true,'true') break; case 8: if(_Text!='') { var _CText=RemoveHTML(_Text); ...

    富文本summernote.js 图片居中

    editor.pasteHTML(imgHTML); }; ``` 这里我们创建了一个`&lt;div class="text-center"&gt;`,并将其添加到`insertImage`回调中。`text-center`是Bootstrap中的类,用于水平居中元素。 3. **自定义按钮**:另一种方法...

    javascript网页关键字高亮代码.docx

    range.pasteHTML(range.text.fontcolor(key[2])); } } else { var sel, n; sel = window.getSelection(); sel.collapse(document.body, 0); while (window.find(key[0])) { var n = document.createElement...

    js设置文字颜色的方法示例

    4. 对于现代浏览器,使用`range.findText()`和`range.pasteHTML()`来搜索并替换文本。 5. 对于旧版IE,使用`window.find()`和`surroundContents()`来搜索和替换文本。 6. 非标准的`fontcolor()`函数在IE中用于设置...

    javascript关键字高亮代码

    range.pasteHTML(range.text.fontcolor(key[2])); } } else { var s, n; s = window.getSelection(); s.collapse(document.body, 0); while (window.find(key[0])) { var n = document.createElement("SPAN...

    KindEditor从Word复制内容自动文本化

    在这些文件中,找到处理粘贴内容的部分,通常会有类似`pasteText`或`pasteHTML`的函数。我们需要修改这部分代码,使其在粘贴时执行文本化操作。 一种常见的做法是使用正则表达式匹配并替换掉所有的HTML标签,只保留...

Global site tag (gtag.js) - Google Analytics