我有一个令人满意的p标签。当提取来自p标签的内容并将其插入另一个标签时,原始的所有标记都将丢失。有没有办法保存标记?
请注意,如果插入符号位于段落中的第i个位置,则字符将从该位置开始提取直至结束。
function select() {
var el = document.getElementById('p');
el.focus();
var sel = window.getSelection();
var selRange = sel.getRangeAt(0);
var range = selRange.cloneRange();
range.selectNodeContents(el);
range.setStart(selRange.endContainer, selRange.endOffset);
document.getElementById('other').innerHTML = (range.extractContents().textContent);
// return range.extractContents().textContent;
}
p {
background-color: #eee;
}
.red {
color: red;
}
<p id="p" contenteditable="true">This is <i>a</i> <span class="red">paragraph</span> <b>with</b> lots of markup.</p>
<p id="other"></p>
<button onclick="select()">SELECT</button>
答案 0 :(得分:5)
range.extractContents()
返回DocumentFragment
。
DocumentFragment
没有innerHTML
属性。 innerHTML
来自Element
界面,而textContent
是Node
界面的一部分。 DocumentFragment
继承自Node
,但不是Element
。
这意味着你可以只追加整个片段,因为它是Node
:
function select() {
var el = document.getElementById('p');
el.focus();
var sel = window.getSelection();
var selRange = sel.getRangeAt(0);
var range = selRange.cloneRange();
range.selectNodeContents(el);
range.setStart(selRange.endContainer, selRange.endOffset);
//document.getElementById('other').innerHTML = (range.extractContents().textContent);
var frag = range.extractContents();
var i;
var node;
var other = document.getElementById('other');
other.innerHTML = '';
other.appendChild(frag);
}
&#13;
p {
background-color: #eee;
}
.red {
color: red;
}
&#13;
<p id="p" contenteditable="true">This is <i>a</i> <span class="red">paragraph</span> <b>with</b> lots of markup.</p>
<p id="other"></p>
<button onclick="select()">SELECT</button>
&#13;
答案 1 :(得分:2)
供进一步参考,如果有人真的需要提取的片段的innerHTML。
该片段具有子节点,而这些子节点具有outerHTML
属性,因此您只需从所有childNodes中获取const fragment = range.extractContents();
const htmlContent = [].map.call(fragment.childNodes, x => x.outerHTML).join('')
map.call
需要childNodes
部分,因为尽管该片段具有childNodes
属性,但是map
没有{{1}}方法。
答案 2 :(得分:-1)
你的意思不是这样吗?
public class StethoHttpUrlFetcher implements DataFetcher<InputStream> {
private final StethoURLConnectionManager stethoManager;
public StethoHttpUrlFetcher(GlideUrl glideUrl) {
...
this.stethoManager = new StethoURLConnectionManager("Glide");
}
private InputStream loadDataWithRedirects(...) {
...
//urlConnection.setRequestProperty("Accept-Encoding", "gzip"); // don't request, it's wasteful for images
...
stethoManager.preConnect(urlConnection, null);
try {
// Connect explicitly to avoid errors in decoders if connection fails.
urlConnection.connect();
stethoManager.postConnect();
} catch (IOException ex) {
stethoManager.httpExchangeFailed(ex);
throw ex;
}
...
}
private InputStream getStreamForSuccessfulRequest(HttpURLConnection urlConnection) throws IOException {
try {
InputStream responseStream = stethoManager.interpretResponseStream(urlConnection.getInputStream());
if (TextUtils.isEmpty(urlConnection.getContentEncoding())) {
...
stream = ContentLengthInputStream.obtain(responseStream, contentLength);
} else {
...
stream = responseStream;
}
return stream;
} catch (IOException ex) {
stethoManager.httpExchangeFailed(ex);
throw ex;
}
}
@Override public void cleanup() {
...
if (isCancelled) { // otherwise it stays pending indefinitely because the stream is not read
stethoManager.httpExchangeFailed(new IOException("Cancelled"));
}
}
}
你的javascript就这么简单:
document.getElementById('other').innerHTML = el.innerHTML;
修改强>
嘿,你拒绝投票给我答案,但你能解释一下你想要实现的目标吗?我在上面写的代码你可以看到在这个jsfiddle中工作:https://jsfiddle.net/936zuzky/1/您想要保存原始标记 - 它已保存,您希望实现什么目标?