關於mark.js——————給頁面選中文字添加下劃線

引用文檔：https://markjs.io/

本文用到的文件：https://download.csdn.net/download/impossible1994727/12474212

 

我全部通過基本例子來完成的：

1、根據內容匹配：

context種如果有相同的內容可能也會被匹配；

        <div class="context">
               散文是一個漢語詞彙，拼音是sǎn wén。一指文采煥發;二指猶行 散文是一種抒發作者真情實感、寫作方式靈活的記敘類文學體裁。"散文"一詞大概出現在北宋太平興國(976年12月-984年11月)時期。《辭海》認爲:中國六朝以來，爲區別韻文與駢文，把凡不押韻、不重排偶的散體文章(包括經傳史書)，統稱"散文"。後又泛指詩歌以外的所有文學體裁隨着時代的發展，散文的概念由廣義向狹義轉變，並受到西方文化的影響。雨巷戴，我希望逢着一個丁香一樣的結着愁怨的姑娘----她是有丁香一樣的顏色，丁香一樣的芬芳，丁香一樣在雨中哀怨，哀怨又彷徨。----她彷徨在這寂寥的雨巷，撐着油紙傘默默彳(chì)亍(chù)①着，冷漠，悽清，又惆悵。----她靜默地走走近，又投出望舒撐着油紙傘，獨自彷徨在悠長、悠長又寂寥的雨巷
        </div>
<script>
    var txt = '';
    $('.context').mouseup(function (e) {
        txt = window.getSelection ? window.getSelection() : document.selection.createRange().text;
        txt = txt.toString();
          var options = {
            "element": "mark",
            "className": "",
            "exclude": [],
            "iframes": false,
            "iframesTimeout": 5000,
            "each": function (node, range) {},
            "filter": function (textNode, foundTerm, totalCounter) {
                return true; // must return either true or false
            },
            "noMatch": function (term) {
            },
            "done": function (counter) {
            },
            "debug": false,
            "log": window.console
        };
        mass(txt, options)
    });
    function mass(txt, options) {
         var context = document.querySelector(".context");
         var instance = new Mark(context);
        instance.mark(txt, options);
    }
</script>

2、根據文字下標匹配：(注意測試的時候.context必須在html最前邊，有需要的自己在調整。)

<script>
    var start, ent,txt;
    $('.context').mouseup(function (e) {
        txt = window.getSelection ? window.getSelection() : document.selection.createRange().text;
        start = txt.anchorOffset;
        end = txt.focusOffset;
    });
    //劃線功能
    $('.bbb').click(() => {
        var options = {
            "element": "mark",
            "className": "",
            "exclude": [],
            "iframes": false,
            "iframesTimeout": 5000,
            "each": function (node, range) {},
            "filter": function (textNode, foundTerm, totalCounter) {
                return true; // must return either true or false
            },
            "noMatch": function (term) {},
            "done": function (counter) {},
            "debug": false,
            "log": window.console
        };
        mass(txt, options)
    })
    function mass(txt, options) {
        var context = document.querySelector(".context"); // requires an element with class "context" to exist
        var instance = new Mark(context);
        instance.markRanges([{
            start: start,
            length: start-end
        }]); // marks matches with ranges 15-20 and 25-33
    }

</script>

3、正則匹配：

<script>
    var txt = '';
    $('.context').mouseup(function (e) {
        txt = window.getSelection ? window.getSelection() : document.selection.createRange().text;
        txt = txt.toString();
    });
    //劃線功能
    $('.bbb').click(() => {
        //var instance = new Mark(document.querySelector(".context"));
        //contentEl.mark(txt);
        var reg = "/" + txt + "/gim";
        var options = {
            "element": "mark",
            "className": "",
            "exclude": [],
            "iframes": false,
            "iframesTimeout": 5000,
            "each": function (node, range) {},
            "filter": function (textNode, foundTerm, totalCounter) {
                return true; // must return either true or false
            },
            "noMatch": function (term) {},
            "done": function (counter) {},
            "debug": false,
            "log": window.console
        };
        $('.context').markRegExp(eval(reg),options);
    })
</script>