Codemirror: Grab Title Value To Input[type=text]
Codemirror: Grab Title Value To Input[type=text]
I'm trying to grab the <title> tag in Codemirror and set it's value as a input[type=text] value. However I keep getting an integer instead of the text.
<title>
In this sample it's "HTML5 canvas demo". Of course it changes.
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
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>
1 Answer
1
The integer you are getting is the index of "<" in the title tag. To get the title you can use 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);
@mikethedj4, There were some typos in the code. try it now. Good luck!
– aljordan82
Mar 2 '15 at 16:37
Thank you very much :)
– Michael Schwartz
Mar 9 '15 at 1:06
Thanks for contributing an answer to Stack Overflow!
But avoid …
To learn more, see our tips on writing great answers.
Required, but never shown
Required, but never shown
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Code makes sense, but it doesn't seem to work - jsbin.com/roxovolaxu/1
– Michael Schwartz
Mar 2 '15 at 1:53