Question

我正在尝试抓取Codemirror中的<title>标记，并将其值设置为输入[type = text]值。但是我继续得到一个整数而不是文本。

在此示例中，它是“HTML5 canvas demo”。当然它会改变。

$(document).ready(function() {
  var dest = $(".projectname");
  var editorTitle = editor.getValue().search("<title>");
  dest.val(editorTitle).val(dest.val().split(" ").join(""));
});

var delay;

// Initialize CodeMirror editor
var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
  mode: 'text/html',
  tabMode: 'indent',
  styleActiveLine: true,
  lineNumbers: true,
  lineWrapping: true,
  autoCloseTags: true,
  foldGutter: true,
  dragDrop : true,
  gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter']
});

// Live preview
editor.on('change', function() {
  clearTimeout(delay);
  delay = setTimeout(updatePreview, 300);
});

function updatePreview() {
  var previewFrame = document.getElementById('preview');
  var preview =  previewFrame.contentDocument ||  previewFrame.contentWindow.document;
  preview.open();
  preview.write(editor.getValue());
  preview.close();
}
setTimeout(updatePreview, 300);

.CodeMirror, iframe {
  border: 1px solid black;
}

.CodeMirror, iframe, .projectname {
  float: left;
}

.CodeMirror {
  width: 50%;
}

iframe {
  width: 49%;
  height: 300px;
  border-left: 0;
}

.projectname {
  width: 99.4%;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Codemirror: Grab Title Value</title>
    <meta charset='utf-8'>
    <meta name='viewport' content='initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='IE=9' />
    <link type='text/css' rel='stylesheet' href='http://necolas.github.io/normalize.css/3.0.1/normalize.css'/>
    <script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>
    <script src='http://codemirror.net/lib/codemirror.js'></script>
    <link rel='stylesheet'  href='http://codemirror.net/lib/codemirror.css'>
    <link rel='stylesheet'  href='http://codemirror.net/addon/fold/foldgutter.css' />
    <script src='http://codemirror.net/javascripts/code-completion.js'></script>
    <script src='http://codemirror.net/javascripts/css-completion.js'></script>
    <script src='http://codemirror.net/javascripts/html-completion.js'></script>
    <script src='http://codemirror.net/mode/javascript/javascript.js'></script>
    <script src='http://codemirror.net/mode/xml/xml.js'></script>
    <script src='http://codemirror.net/mode/css/css.js'></script>
    <script src='http://codemirror.net/mode/htmlmixed/htmlmixed.js'></script>
    <script src='http://codemirror.net/addon/edit/closetag.js'></script>
    <script src='http://codemirror.net/addon/edit/matchbrackets.js'></script>
    <script src='http://codemirror.net/addon/selection/active-line.js'></script>
    <script src='http://codemirror.net/keymap/extra.js'></script>
    <script src='http://codemirror.net/addon/fold/foldcode.js'></script>
    <script src='http://codemirror.net/addon/fold/foldgutter.js'></script>
    <script src='http://codemirror.net/addon/fold/brace-fold.js'></script>
    <script src='http://codemirror.net/addon/fold/xml-fold.js'></script>
    <script src='http://codemirror.net/addon/fold/comment-fold.js'></script>
  </head>
  <body>
    <div>
      <input type="text" class="projectname" placeholder="Find title tag in editor and add what's inside it here..." />
    </div>

    <textarea id='code' name='code'><!doctype html>
<html>
  <head>
    <meta charset=utf-8>
    <title>HTML5 canvas demo</title>
  </head>
  <body>
    hello world!
  </body>
</html></textarea>

    <iframe id='preview'></iframe>
  </body>
</html>

Answer 1

您获得的整数是“＆lt;”的索引在标题标签中。要获得标题，您可以使用regEx。

  var content =  editor.getValue();
  var openTagIndex = content.search(/<title/);
  var closeTagIndex = content.search(/<\/title>/);
  var titleTag = content.slice(openTagIndex , closeTagIndex);
  var editorTitle = titleTag.slice(titleTag.search(/>/) + 1);

Codemirror：抓取标题值输入[type = text]

1 个答案: