跳转至内容
  • 最新
  • 版块
  • 标签
  • 热门
  • 用户
  • 群组
  • 太微中文教程
  • 新插件投票看板
皮肤
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • 默认(不使用皮肤)
  • 不使用皮肤
折叠
太微中文论坛icon

太微中文论坛

  1. 首页信息流
  2. 版块
  3. 讨论
  4. 条目内用正则表达式查找替换并渲染文本

条目内用正则表达式查找替换并渲染文本

已定时 已固定 已锁定 已移动 讨论
阅读样式javascript正则表达式查找替换
8 帖子 2 发布者 156 浏览
  • 从旧到新
  • 从新到旧
  • 最多赞同
登录后回复
此主题已被删除。只有拥有主题管理权限的用户可以查看。
  • dyp1121054136D 离线
    dyp1121054136D 离线
    dyp1121054136
    写于 最后由 dyp1121054136 编辑
    #1

    最完美的方案,使用级联,替换掉默认的查看模板,不卡,不影响原文排版。

    附件下载:
    (右键-链接另存为)
    级联-根据字段在查看模式下实现小说对话高亮.json


    以下方案太过复杂或存在bug,已弃用,仅供参考:

    旧版教程:
    正则表达式JavaScript-ReplacePragma.html

    附件下载:
    (右键-链接另存为)
    样式-中文双引号正则表达式(含JavaScript需保存刷新生效).json

    1 条回复 最后回复
    0
    • dyp1121054136D 离线
      dyp1121054136D 离线
      dyp1121054136
      写于 最后由 编辑
      #2

      ReplacePragma查找替换测试.jpg

      1 条回复 最后回复
      0
      • dyp1121054136D 离线
        dyp1121054136D 离线
        dyp1121054136
        写于 最后由 编辑
        #3

        ReplacePragma查找替换测试-小说对话.jpg

        1 条回复 最后回复
        0
        • dyp1121054136D 离线
          dyp1121054136D 离线
          dyp1121054136
          写于 最后由 dyp1121054136 编辑
          #4

          小说对话-中文双引号样式css
          标签 $:/tags/Stylesheet

          .quote {
          	color: #B26576; /* 文字颜色 */
          }
          

          备用样式css

          /* 背景颜色 50%表示半涂*/
          background-image: linear-gradient(to top, #F2E6CE 50%, transparent 0);
          background-color: unset;
          background-position: top left;
          background-repeat: no-repeat;
          background-size: 100% auto; 
          border-radius:0.4em; /* 圆角 */
          padding:0em 0em 0em 0em; /* 缩进,内边距,上右下左 */
          
          font-size: 0.9em; /* 字体大小为正文的90% */
          text-decoration: underline; /* 下划线,double双下划线,dotted虚线,wavy波浪线 */  
          text-underline-offset: 0.2em; 下划线与文字间距 */ 
          text-decoration-color: rgba(110, 139, 116, 0.5); /* 下划线颜色,使用rgba格式,透明度为0.5 */ 
          
          1 条回复 最后回复
          0
          • dyp1121054136D 离线
            dyp1121054136D 离线
            dyp1121054136
            写于 最后由 dyp1121054136 编辑
            #5

            引用代码需在每个条目内容第一行加上:

            \replace /“(.*?)”/<span class="quote">“$1”<\/span>/
            

            (.*?) 表示匹配任意数量的字符,直到遇到下一个正则表达式中定义的元素;
            $1 表示第一个捕获组的内容不改变;
            这个正则表达式合起来的意思是,查找被中文双引号 “” 包裹的文字,并加上前缀 <span class="quote"> 和后缀 </span>,即给文字套用 class="quote" 的样式。

            注意:</span> 应写作 <\/span>(在正则表达式中,反斜杠 \ 通常用作转义字符,用于转义那些具有特殊意义的字符,例如在正则表达式中具有特殊功能的标点符号。)

            经测试,被渲染过样式的条目引用内容到其他条目,渲染样式也会生效,但是代码本身不能用引用的方式插入当前条目,不知道有没有更好的封装方式。

            可以自定义其他的正则表达式,写法:

            \replace /查找的内容/替换的内容/
            

            用正则表达式添加的 html 代码在编辑模式下看是隐形的,但在预览模式下又能看到套用了样式的效果,正文不需要重复写代码了,非常方便,而且不会影响正文嵌套其他样式。嘻嘻,我们中文也有自己的高亮!

            1 条回复 最后回复
            0
            • dyp1121054136D 离线
              dyp1121054136D 离线
              dyp1121054136
              写于 最后由 dyp1121054136 编辑
              #6

              大佬的正则表达式JavaScript-ReplacePragma赏析
              (这居然是十年前写的了,怎么一直没有人翻出来用😊 )

              条目标题 $:/parsers/skeeve/rules/replace.js
              条目类型 JavaScript源码(application/javascript)
              条目字段 module-type
              字段内容 wikirule

              条目内容

              /*\
              title: $:/parsers/skeeve/rules/replace.js
              type: application/javascript
              module-type: wikirule
              
              Wiki pragma rule for replacements
              
              

              \replace /search/replace/

              
              \*/
              (function(){
              
              /*jslint node: true, browser: true */
              /*global $tw: false */
              "use strict";
              
              exports.name = "replace";
              exports.types = {pragma: true};
              
              /*
              Instantiate parse rule
              */
              exports.init = function(parser) {
              	this.parser = parser;
              	// Regexp to match
              	this.matchRegExp = /^\\replace\s+\/((?:[^\/]*|\\.)*)\/((?:[^\/]*|\\.)*)\/[ \t]*$/mg;
              	this.findNextMatch = findNextMatch;
              }
              
              function findNextMatch(startPos) {
              	this.matchRegExp.lastIndex = startPos;
              	this.match = this.matchRegExp.exec(this.parser.source);
              	if(!this.match) return undefined;
              	if(this.replacementsDone) return this.match.index;
              	
              	this.replacementsDone = true;
              	
              	// Find the end of all pragmas
              	var pragmaLine = /^(?:.*\n)*\s*\\.*\n/g;
              	pragmaLine.exec(this.parser.source);
              	var pragmaEnd = pragmaLine.lastIndex;
              	var src = this.parser.source.substr(pragmaEnd);
              	
              	console.log("src:",src.replace(/\n/g,"\\n"));
              	
              	do {
              		var search = new RegExp(this.match[1], "gm"),
              			 replace = this.match[2].replace(/\\n/g,"\n").replace(/\\t/g,"\t").replace(/\\(.)/g, "$1");
              	  console.log("search:",search);
              	  console.log("replace:",replace);
              		src = src.replace(search, replace);
              	  console.log("result:",src.replace(/\n/g,"\\n"));
              	} while(this.match = this.matchRegExp.exec(this.parser.source));
              	this.parser.source = this.parser.source.substr(0,pragmaEnd) + src;
              	this.parser.sourceLength = this.parser.source.length;
              	this.match = this.matchRegExp.exec(this.parser.source)
              	return this.match.index;
              };
              
              /*
              Parse the most recent match
              */
              exports.parse = function() {
              	// Move past match
              	this.parser.pos = this.matchRegExp.lastIndex;
              	return [];
              };
              
              })();
              
              
              1 条回复 最后回复
              0
              • dyp1121054136D 离线
                dyp1121054136D 离线
                dyp1121054136
                写于 最后由 dyp1121054136 编辑
                #7

                注:
                导入JavaScript后要保存wiki并刷新才会生效;

                请确保你写的正则表达式是正确的,再填入条目内容中,不然可能造成wiki卡死,可以先在草稿wiki中测试完无误之后再使用。

                1 条回复 最后回复
                0
                • oeyoewsO 离线
                  oeyoewsO 离线
                  oeyoews
                  写于 最后由 编辑
                  #8

                  正则对于大量文本来说,一直都是性能杀手,同样会造成保存tiddler时卡顿

                  1 条回复 最后回复
                  1

                  • 登录

                  • 没有帐号? 注册

                  • 登录或注册以进行搜索。
                  Powered by NodeBB Contributors
                  • 第一个帖子
                    最后一个帖子
                  0
                  • 最新
                  • 版块
                  • 标签
                  • 热门
                  • 用户
                  • 群组
                  • 太微中文教程
                  • 新插件投票看板